<template>
  <div v-bind:id="playerId">
    <!-- 因为视频播放需要不断初始化，将div设计为动态 -->
<!--    <div  class="prism-player" id="J_prismPlayer"></div>-->
  </div>
</template>
<script>
import Toast from "../../public/static/js/toast";
import Loading from "../../public/static/js/loading";
  export default {
    name: 'player',
    props: {
      playerId: {
        default: "player-div"
      },
    },
    data: function () {
      return {
        aliPlayer: {}, // 播放器实例
        fileBase: `${process.env.VUE_APP_BASE_URL}/file`,
      }
    },
    methods: {
      // 根据视频url播放
      playUrl(url) {
        let _this = this;

        //如果已经有播放器了，则将播放器div删除
        if (_this.aliPlayer) {
          _this.aliPlayer = null;
          $("#" + _this.playerId + '-player').remove();
        }

        // 初始化播放器
        $("#" + _this.playerId).append("<div class=\"prism-player\" id=\"" + _this.playerId + "-player\"></div>");
        _this.aliPlayer = new Aliplayer({
          id: _this.playerId + '-player',
          width: '100%',
          autoplay: false,
          source: url,
          cover: 'https://durian-course.oss-cn-guangzhou.aliyuncs.com/294f52d61608.png',
        }, function (player) {
        });
      },
      // 视频点播
      playVod (vod) {
        let _this = this;
        Loading.show();
        _this.$axios.get(`${_this.fileBase}/vod/auth/${vod}`).then((response)=>{
          Loading.hide();
          let resp = response.data;
          if (resp.success) {
            //如果已经有播放器了，则将播放器div删除
            if (_this.aliPlayer) {
              _this.aliPlayer = null;
              $("#" + _this.playerId + '-player').remove();
            }

            // 初始化播放器
            $("#" + _this.playerId).append("<div class=\"prism-player\" id=\"" + _this.playerId + "-player\"></div>");
            _this.aliPlayer = new Aliplayer({
              id: _this.playerId + '-player',
              width: '100%',
              autoplay: false,
              vid: vod,
              playauth: resp.data,
              cover: 'https://durian-course.oss-cn-guangzhou.aliyuncs.com/294f52d61608.png',
              encryptType:1, //当播放私有加密流时需要设置。
            },function(player){

            });
          } else {
            Toast.warning('播放错误')
          }
        })

      }
    }
  }
</script>